import { UserAuth } from '../../utils/hooks';
import NotAuth from '../../components/NotAuth';
import React, { useRef, useState, useEffect } from 'react';
import { Row, Col, Layout, Statistic, message, Spin } from 'antd';
import * as echarts from 'echarts/core';
import { ScatterChart, EffectScatterChart } from 'echarts/charts';
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components';
import { PieChart } from 'echarts/charts';
import { LabelLayout, UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import eTheme from '../../Config/echartTheme';
import 'echarts/extension/bmap/bmap';
import axios from 'axios';
import Config from '../../Config';
const { Header, Content, Sider } = Layout;
echarts.use([
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  LabelLayout,
  ScatterChart,
  EffectScatterChart,
  UniversalTransition,
]);

function getVirtulData(year) {
  year = year || '2022';
  var date = +echarts.number.parseDate(year + '-01-01');
  var end = +echarts.number.parseDate(+year + 1 + '-01-01');
  var dayTime = 3600 * 24 * 1000;
  var data = [];
  for (var time = date; time < end; time += dayTime) {
    data.push([echarts.format.formatTime('yyyy-MM-dd', time), Math.floor(Math.random() * 10000)]);
  }
  return data;
}
const InPresent = () => {
  const [loading, SetLoading] = useState(false);
  const [count1, Setcount1] = useState(0);
  const [count2, Setcount2] = useState(0);
  const ref1 = useRef();
  const ref2 = useRef();
  const ref3 = useRef();
  const ref4 = useRef();
  const ref5 = useRef();
  useEffect(() => {
    SetLoading(true);
    let size = 15;

    axios
      .get(Config.baseURL + '/instrument/getPresentData')
      .then(res => {
        console.log(res.data);
        if (res.data.code == 1) {
          Setcount1(res.data.data.inCount);
          Setcount2(Math.floor(res.data.data.placeCount));
          let list3arr1 = [],
            list3arr2 = [];
          for (let i = 0; i < res.data.data.list3.length; i++) {
            list3arr1.push(res.data.data.list3[i].name);
            list3arr2.push(res.data.data.list3[i].value);
          }

          let chartDom1 = ref1.current;
          let myChart1 = echarts.init(chartDom1, 'customed');
          let option1;
          let chartDom2 = ref2.current;
          let myChart2 = echarts.init(chartDom2, 'customed');
          let option2;
          let chartDom3 = ref3.current;
          let myChart3 = echarts.init(chartDom3, 'customed');
          let option3;
          let chartDom4 = ref4.current;
          let myChart4 = echarts.init(chartDom4, 'customed');
          let option4;
          let chartDom5 = ref5.current;
          let myChart5 = echarts.init(chartDom5, 'customed');
          let option5;

          option1 = {
            title: {
              text: '仪器学科分布',
              left: 'center',
            },
            tooltip: {
              trigger: 'item',
            },
            legend: {
              orient: 'vertical',
              left: 'left',
            },
            series: [
              {
                name: '学科分布',
                type: 'pie',
                radius: '50%',
                data: res.data.data.list1,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                  },
                },
              },
            ],
          };

          option2 = {
            title: {
              text: '仪器存放地分布',
              left: 'center',
            },
            tooltip: {
              trigger: 'item',
            },
            bmap: {
              center: [104.114129, 37.550339],
              zoom: 5,
              roam: true,
              mapStyle: {
                styleJson: [
                  {
                    featureType: 'water',
                    elementType: 'all',
                    stylers: {
                      color: '#d1d1d1',
                    },
                  },
                  {
                    featureType: 'land',
                    elementType: 'all',
                    stylers: {
                      color: '#f3f3f3',
                    },
                  },
                  {
                    featureType: 'railway',
                    elementType: 'all',
                    stylers: {
                      visibility: 'off',
                    },
                  },
                  {
                    featureType: 'highway',
                    elementType: 'all',
                    stylers: {
                      color: '#fdfdfd',
                    },
                  },
                  {
                    featureType: 'highway',
                    elementType: 'labels',
                    stylers: {
                      visibility: 'off',
                    },
                  },
                  {
                    featureType: 'arterial',
                    elementType: 'geometry',
                    stylers: {
                      color: '#fefefe',
                    },
                  },
                  {
                    featureType: 'arterial',
                    elementType: 'geometry.fill',
                    stylers: {
                      color: '#fefefe',
                    },
                  },
                  {
                    featureType: 'poi',
                    elementType: 'all',
                    stylers: {
                      visibility: 'off',
                    },
                  },
                  {
                    featureType: 'green',
                    elementType: 'all',
                    stylers: {
                      visibility: 'off',
                    },
                  },
                  {
                    featureType: 'subway',
                    elementType: 'all',
                    stylers: {
                      visibility: 'off',
                    },
                  },
                  {
                    featureType: 'manmade',
                    elementType: 'all',
                    stylers: {
                      color: '#d1d1d1',
                    },
                  },
                  {
                    featureType: 'local',
                    elementType: 'all',
                    stylers: {
                      color: '#d1d1d1',
                    },
                  },
                  {
                    featureType: 'arterial',
                    elementType: 'labels',
                    stylers: {
                      visibility: 'off',
                    },
                  },
                  {
                    featureType: 'boundary',
                    elementType: 'all',
                    stylers: {
                      color: '#fefefe',
                    },
                  },
                  {
                    featureType: 'building',
                    elementType: 'all',
                    stylers: {
                      color: '#d1d1d1',
                    },
                  },
                  {
                    featureType: 'label',
                    elementType: 'labels.text.fill',
                    stylers: {
                      color: '#999999',
                    },
                  },
                ],
              },
            },
            series: [
              {
                name: 'pm2.5',
                type: 'scatter',
                coordinateSystem: 'bmap',
                data: res.data.data.list2,
                symbolSize: function (val) {
                  return (val[2] / res.data.data.inCount) * size;
                },
                encode: {
                  value: 2,
                },
                showEffectOn: 'render',
                rippleEffect: {
                  brushType: 'stroke',
                },
                label: {
                  formatter: '{b}',
                  position: 'right',
                  show: false,
                },
                emphasis: {
                  label: {
                    show: true,
                    scale: true,
                  },
                },
              },
              {
                name: '仪器数量',
                type: 'effectScatter',
                coordinateSystem: 'bmap',
                data: res.data.data.list2,
                symbolSize: function (val) {
                  return (val[2] / res.data.data.inCount) * size;
                },
                encode: {
                  value: 2,
                },
                showEffectOn: 'render',
                rippleEffect: {
                  brushType: 'stroke',
                },
                label: {
                  formatter: '{b}',
                  position: 'right',
                  show: true,
                },
                itemStyle: {
                  shadowBlur: 10,
                  shadowColor: '#333',
                },
                emphasis: {
                  scale: true,
                },
                zlevel: 1,
              },
            ],
          };
          option3 = {
            title: {
              text: '仪器使用方向',
              left: 'center',
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow',
              },
            },
            legend: {},
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true,
            },
            xAxis: {
              type: 'value',
              boundaryGap: [0, 0.01],
            },
            yAxis: {
              type: 'category',
              data: list3arr1,
            },
            series: [
              {
                type: 'bar',
                data: list3arr2,
              },
            ],
          };
          option4 = {
            title: {
              text: '仪器收费标准及金额',
              left: 'center',
            },
            xAxis: {},
            yAxis: {},
            tooltip: {
              showDelay: 0,
              formatter: function (params) {
                if (params.value.length > 1) {
                  return (
                    params.seriesName +
                    ' :<br/>' +
                    params.value[0] +
                    '元 ' +
                    params.value[1] +
                    '元 '
                  );
                } else {
                  return params.seriesName + ' :<br/>' + params.name + ' : ' + params.value + '元 ';
                }
              },
              axisPointer: {
                show: true,
                type: 'cross',
                lineStyle: {
                  type: 'dashed',
                  width: 1,
                },
              },
            },
            series: [
              {
                name: '仪器金额及收费标准',
                symbolSize: 20,
                data: res.data.data.list4,
                type: 'scatter',
                symbolSize: 3,
                itemStyle: {
                  opacity: 0.4,
                },
                blendMode: 'source-over',
                large: true,
                largeThreshold: 500,
                markLine: {
                  lineStyle: {
                    type: 'solid',
                  },
                  data: [
                    { type: 'average', name: '金额平均值' },
                    { xAxis: res.data.data.jeAvg },
                    { type: 'average', name: '收费标准平均值' },
                    { yAxis: res.data.data.sfbzAvg },
                  ],
                },
              },
            ],
          };
          console.log(getVirtulData('2022'));
          let op5fakeData = [
            ['2022-04-23', 10000],
            ['2022-04-29', 15],
            ['2022-05-03', 21],
            ['2022-05-16', 10000],
          ];
          option5 = {
            title: {
              top: 30,
              left: 'center',
              text: '仪器录入情况',
            },
            tooltip: {},
            visualMap: {
              min: 0,
              max: 10000,
              type: 'piecewise',
              orient: 'horizontal',
              left: 'center',
              top: 65,
              inRange: {
                color: ['white', 'green'],
              },
            },
            calendar: {
              top: 120,
              left: 30,
              right: 30,
              cellSize: ['auto', 13],
              range: '2022',
              itemStyle: {
                borderWidth: 0.5,
              },
              yearLabel: { show: false },
            },
            series: {
              type: 'heatmap',
              coordinateSystem: 'calendar',
              data: op5fakeData,
            },
          };
          myChart1.setOption(option1);
          myChart2.setOption(option2);
          myChart3.setOption(option3);
          myChart4.setOption(option4);
          myChart5.setOption(option5);
          SetLoading(false);
        } else if (res.data.code >= 10000) {
          message.error(res.data.message, 2);
          SetLoading(false);
        }
      })
      .catch(err => {
        console.log(err);
        SetLoading(false);
      });

    echarts.registerTheme('customed', eTheme);
  }, []);
  return (
    <>
      <Layout>
        <Spin spinning={loading}>
          <Content style={{ padding: '5px 0px', backgroundColor: 'white' }}>
            <Row>
              <Col span={6}>
                <Row>
                  <div style={{ height: '500px', width: '500px' }} ref={ref1}></div>
                </Row>
              </Col>
              <Col span={12}>
                <Row gutter={16}>
                  <Col span={12}>
                    <Statistic title="仪器数量" valueStyle={{ color: '#4B7EFE' }} value={count1} />
                  </Col>
                  <Col span={12}>
                    <Statistic title="存放地数" valueStyle={{ color: '#4B7EFE' }} value={count2} />
                  </Col>
                </Row>
                <Row style={{ height: '450px', width: '100%', padding: '10px' }}>
                  <div style={{ height: '100%', width: '100%' }} ref={ref2}></div>
                </Row>
              </Col>
              <Col span={6}>
                <div style={{ height: '350px', width: '100%' }} ref={ref3}></div>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <div style={{ height: '300px' }} ref={ref5}></div>
              </Col>
              <Col span={12}>
                <div style={{ height: '300px' }} ref={ref4}></div>
              </Col>
            </Row>
          </Content>
        </Spin>
      </Layout>
    </>
  );
};

export default () => {
  const { authority } = UserAuth('InPresent');
  return <>{authority ? <InPresent /> : <NotAuth />}</>;
};
